<template>
  <div
    v-if="attributeTabsModel"
    class="v-attribute-table"
  >
    <!-- 属性顶部工作栏 -->
    <div
      v-if="!attributeTabsModel.data.customUI && attributeTabsModel.data.showProperty"
      class="g-toolbar-between"
      :class="[
        $global.isIpcWindow ? '_BackGroundWhite is_ipc' : '__BackGroundGrey' // 子窗口调用，需要加左外边距
      ]"
    >
      <div class="g-toolbar-left">
        <span
          class="g-img-box"
          :class="{ '_sort-active': attributeTabsModel.data.tipsVisible }"
          @click="attributeTabsModel.toggleTipsVisible()"
        >
          <img src="statics/icons/app/icondescribe.svg" />
        </span>
        <span
          class="g-img-box"
          :class="{ '_sort-active': attributeTabsModel.data.searchActive }"
          @click="attributeTabsModel.toggleSearchActive()"
        >
          <img src="statics/icons/app/iconsearch.svg" />
        </span>
        <span
          class="g-img-box"
          :class="{ '_sort-active': attributeTabsModel.data.sortByNameActive }"
          @click="attributeTabsModel.toggleSortByNameActive()"
        >
          <img src="statics/icons/app/textsort.svg" />
        </span>
        <span
          class="g-img-box"
          @click="handelSpread"
        >
          <img src="statics/icons/app/iconspread.svg" />
        </span>
        <span
          class="g-img-box"
          @click="handleShrink"
        >
          <img src="statics/icons/app/iconshrink.svg" />
        </span>
        <span
          v-show="isShowComment"
          class="g-img-box"
          :class="{ '_sort-active': attributeTabsModel.data.filterCommentActive }"
          @click="attributeTabsModel.toggleFilterCommentActive()"
        >
          <img src="statics/icons/app/filterComment.svg" />
        </span>
      </div>
      <div class="g-toolbar-right">
        <MDropdown trigger="click">
          <span class="g-img-box-group">
            <span>{{ $t(getLevelName(attributeTabsModel.data.showLevel)) }}</span>
            <span class="g-img-arrow">
              <img src="statics/header/icontriangle.svg" />
            </span>
          </span>
          <template #dropdown>
            <MDropdownMenuItem
              v-for="item in showLevelOptions"
              :key="item.value"
              @click="attributeTabsModel.setLevel(item.value)"
            >
              {{ $t(item.label) }}
            </MDropdownMenuItem>
          </template>
        </MDropdown>
      </div>
    </div>

    <div
      v-if="!attributeTabsModel.data.showProperty && attributeTabsModel.data.modelIds?.length"
      class="_attribute-content g-fd-c"
    >
      <a
        class="g-m-16 show-button"
        @click="attributeTabsModel.showCommonProperty()"
      >
        {{ $t("为选择的{num}个模型元素显示共有属性", { num: attributeTabsModel.data.modelIds?.length }) }}
      </a>
    </div>
    <div
      v-else-if="attributeTabsModel.propertyPaneModel.loading"
      v-loading="true"
      class="_attribute-content g-fd-c"
      style="width: 100%"
      :element-loading-text="$t('加载中')"
    ></div>
    <div
      v-else
      class="_attribute-content g-fd-c"
    >
      <div
        v-if="attributeTabsModel.data.searchActive"
        class="g-flex-0 search-area"
        :class="[$global.isIpcWindow ? 'g-m-b-10 g-m-l-10' : '']"
      >
        <el-input
          v-model="attributeTabsModel.data.searchQuery"
          :placeholder="$t('搜索')"
        >
          <template #prefix>
            <el-icon class="el-input__icon"><search /></el-icon>
          </template>
        </el-input>
      </div>
      <PropertyTable
        :key="attributeTabsModel.data.modelData?.id"
        :tableDataGroups="visibleTableDataGroups"
        :showTips="attributeTabsModel.data.tipsVisible"
        :instanceName="attributeTabsModel.data.modelData?.modelTypeCnName"
        :encrypted="attributeTabsModel.data.modelData?.hiddenStatus === HiddenStatus.HIDDEN_IN_ENCAP"
        :isShowComment="isShowComment"
        :activeRowId="attributeTabsModel.propertyPaneModel.activeRowId"
        class="g-flex-1"
        :class="[$global.isIpcWindow ? '' : 'g-pd-t-10']"
      />
    </div>
  </div>
</template>
<script lang="ts" setup>
import { computed, watch } from "vue";
import PropertyTable from "./PropertyTable.vue";
import { useEvents } from "@/common/useEvents";
import { Search } from "@element-plus/icons-vue";
import MDropdown from "@/common/dropdown/Dropdown.vue";
import MDropdownMenuItem from "@/common/dropdown/DropdownMenuItem.vue";
import { showLevelOptions, getLevelName } from "./models/AttributeTabsModel";
import { locale } from "@/util/locale";
import { HiddenStatus } from "@/constants/Enums";
import { modelService } from "@/modules/model/service";

// const attributeTabsModel = app.activeProject!.attributeTabsModel;
const attributeTabsModel = computed(() => app.activeProject?.attributeTabsModel);
const visibleTableDataGroups = computed(() => {
  if (!attributeTabsModel.value) return [];
  return attributeTabsModel.value.propertyPaneModel.getVisibleTableDataGroups();
});

const events = {};

const isShowComment = computed(() => {
  return app.activeProject?.ui.isShowComment;
});

useEvents(events);

watch(
  () => locale.value,
  () => {
    if (!attributeTabsModel.value) return;
    for (const group of attributeTabsModel.value.propertyPaneModel.tableDataGroups) {
      modelService.freshPropertyDisplayName(group.properties);
    }
  }
);

function handelSpread() {
  attributeTabsModel.value.propertyPaneModel.tableDataGroups.forEach(group => {
    group.expand = true;
  });
}

function handleShrink() {
  attributeTabsModel.value.propertyPaneModel.tableDataGroups.forEach(group => {
    group.expand = false;
  });
}
</script>
<style lang="scss">
@import "@/assets/css/theme.scss";
.v-attribute-table {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  ._attribute-content {
    flex: 1;
    height: 10px;
    background-color: white;
    .el-input__inner {
      box-shadow: none;
      height: 24px;
    }
    .show-button {
      text-decoration: underline;
      color: $theme-color;
      cursor: pointer;
    }
  }
  .el-input__wrapper {
    box-shadow: none;
  }
  .el-input.is-disabled .el-input__wrapper {
    box-shadow: none;
  }
  .search-area {
    .el-input {
      .el-input__wrapper {
        border: 1px solid #d0d0d0;
        box-shadow: none;
        padding: 0 0 0 12px;
        .el-input__icon {
          margin-right: 5px;
        }
      }
    }
  }
}
</style>
